<!DOCTYPE HTML>
<head>
    <script src="../css3d.js"></script>
    <style>
    </style>
</head>
<body>
    <script>
        //创建场景
        var s = new C3D.Stage();
        s.size(window.innerWidth, window.innerHeight).material({
            color : "#cccccc"
        }).update();
        document.body.appendChild(s.el);

        //创建一个三维容器（创建以方便分组使用）
        var sp = new C3D.Sprite();
        sp.position(0, 0, -500).update();
        s.addChild(sp);

        //创建20个平面放入容器，并定义鼠标事件
        for (var i = 0; i < 20; i++) {
            var p = new C3D.Plane();
            p.size(100, 100, 100)
                    .position(Math.random() * 500 - 250, Math.random() * 500 - 250, Math.random() * 500 - 250)
                    .rotation(Math.random() * 300 - 150, Math.random() * 300 - 150, Math.random() * 300 - 150)
                    .material({
                        color : C3D.getRandomColor()
                    })
                    .buttonMode(true)
                    .update();
            sp.addChild(p);
            p.on("mouseover", function() {
                this.le.scale(1.1).update();
            });
            p.on("mouseout", function() {
                this.le.scale(1).update();
            });
        }

        //创建4个立方体放入容器，并定义鼠标事件
        for (var i = 0; i < 4; i++) {
            var p = new C3D.Box();
            p.size(100, 100, 100)
                    .position(Math.random() * 500 - 250, Math.random() * 500 - 250, Math.random() * 500 - 250)
                    .rotation(Math.random() * 300 - 150, Math.random() * 300 - 150, Math.random() * 300 - 150)
                    .material({
                        color : C3D.getRandomColor()
                    })
                    .buttonMode(true)
                    .update();
            sp.addChild(p);
            p.on("mouseover", function() {
                this.le.scale(1.1).update();
            });
            p.on("mouseout", function() {
                this.le.scale(1).update();
            });
        }

        //响应屏幕调整尺寸
        function resize() {
            s.size(window.innerWidth, window.innerHeight).update();
        };
        window.onresize = function() {
            resize();
        };
        resize();

        //刷新场景
        requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||
        function(callback) {
            setTimeout(callback, 1000 / 60);
        };

        function go() {
            sp.rotate(0, 0.1, 0).updateT();
            // sp.move(0, 1, 0).update();

            requestAnimationFrame(go);
        }

        requestAnimationFrame(go);

    </script>
</body>
